<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min93e3.css" />
		<link rel="stylesheet" type="text/css" href="css/style.min862f.css" />
		<link rel="stylesheet" type="text/css" href="css/kd_style.css" />
	</head>

	<body>
		<button onclick="ShowSelectUser()">显示</button>
		<button onclick="ShowMultipleSelectUser()">显示多选</button>
		<div id="muliUserList"></div>
		<div id="userList" class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-12">

					<div class="tabs-container kd_persTabs1 ">

						<div class="tabs-left">
							<ul class="nav nav-tabs">
								<li class="">
									<a data-toggle="tab" href="#tab-a1"> 门店</a>
								</li>
								<li class="">
									<a data-toggle="tab" href="#tab-a2"> 部门</a>
								</li>
								<li class="active">
									<a data-toggle="tab" href="#tab-a3"> 联系人</a>
								</li>
							</ul>
							<div class="tab-content ">
								<div id="tab-a1" class="tab-pane ">
									<div class="panel-body">
										<div class="kd_persBody ">
											<!--此处加上 kd_on_checkbox 则为没有单选-->
											<div class="input-search">
												<i class="input-search-icon  glyphicon glyphicon-search" aria-hidden="true"></i>
												<input type="text" class="form-control" name="" placeholder="Search...">
												<button type="button" class="input-search-close " aria-label="Close"><i class="glyphicon glyphicon-remove"></i></button>
											</div>
											<div class="kd_search_body hidden">
												<!--点击搜索展示此部分数据-->
												<ul class="kdpers_list">
													<li class="kdpers_errormsg hidden">请求失败</li>

													<li data-id="1" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">总经办</span><em class="kdmini_nums">（3）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="2" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">财务</span><em class="kdmini_nums">（2）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>

												</ul>
											</div>
											<div class="nav-tabs-horizontal">
												<ul class="kdpers_list">
													<li class="kdpers_errormsg hidden">请求失败</li>
													<li data-id="1" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">全选</span></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="1" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">光谷店</span></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="2" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">汉口店</span></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="2" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">汉阳店</span></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>

												</ul>
											</div>
										</div>

									</div>
								</div>
								<div id="tab-a2" class="tab-pane">
									<div class="panel-body">
										<div class="kd_persBody ">
											<!--此处加上 kd_on_checkbox 则为没有单选-->
											<div class="input-search">
												<i class="input-search-icon  glyphicon glyphicon-search" aria-hidden="true"></i>
												<input type="text" class="form-control" name="" placeholder="Search...">
												<button type="button" class="input-search-close " aria-label="Close"><i class="glyphicon glyphicon-remove"></i></button>
											</div>
											<div class="kd_search_body hidden">
												<!--点击搜索展示此部分数据-->
												<ul class="kdpers_list">
													<li class="kdpers_errormsg hidden">请求失败</li>

													<li data-id="1" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">总经办</span><em class="kdmini_nums">（3）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="2" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">财务</span><em class="kdmini_nums">（2）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>

												</ul>
											</div>
											<div class="nav-tabs-horizontal">
												<ul class="kdpers_list">
													<li class="kdpers_errormsg hidden">请求失败</li>
													<li data-id="1" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">全选</span></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="1" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">总经办</span><em class="kdmini_nums">（3）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="2" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">财务</span><em class="kdmini_nums">（2）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="2" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">人事</span><em class="kdmini_nums">（2）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="2" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">工程部</span><em class="kdmini_nums">（2）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>
													<li data-id="2" class="kdpers_parentnode">
														<div class="kdpers_title">
															<h5><span class="kdmini_parentname">采购</span><em class="kdmini_nums">（2）</em></h5>
															<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
														</div>
													</li>

												</ul>

											</div>
										</div>

									</div>
								</div>
								<div id="tab-a3" class="tab-pane active">
									<div class="panel-body ">
										<div class="kd_persBody ">
											<!--此处加上 kd_on_checkbox 则为没有单选-->
											<div class="input-search">
												<i class="input-search-icon  glyphicon glyphicon-search" aria-hidden="true"></i>
												<input type="text" class="form-control" name="" placeholder="Search...">
												<button type="button" class="input-search-close " aria-label="Close"><i class="glyphicon glyphicon-remove"></i></button>
											</div>
											<div class="kd_search_body hidden">
												<!--点击搜索展示此部分数据-->
												<ul class="kdpers_list">
													<li class="kdpers_parentnode">
														<ul class="kdpers_chatlist">
															<li data-id="100001" class="kdmini_childnode" type="one">
																<a class="kdpers_oneface"><img src="img/a5.jpg"></a>
																<div class="kdpers_onename">
																	<h4><span>郭敬明（掌门）</span></h4>
																	<p>仙剑—华山派</p>
																</div>
																<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
															</li>
															<li data-id="100002" class="kdmini_childnode" type="one">
																<a class="kdpers_oneface"><img src="img/a6.jpg"></a>
																<div class="kdpers_onename">
																	<h4><span>崔成浩（大师姐）</span> </h4>
																	<p>仙剑—华山派</p>
																</div>
																<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
															</li>
															<li data-id="1000022" class="kdmini_childnode" type="one">
																<a class="kdpers_oneface"><img src="img/a7.jpg"></a>
																<div class="kdpers_onename">
																	<h4><span>韩寒（小师妹）</span> </h4>
																	<p>仙剑—华山派</p>
																</div>
																<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
															</li>
														</ul>
													</li>

												</ul>
											</div>
											<div class="nav-tabs-horizontal">
												<ul class="nav nav-tabs nav-tabs-line kd_parent">
													<li class="kd_child active">
														<a data-toggle="tab" href="#tab-1" aria-expanded="true"> 本店</a>
													</li>
													<li class="kd_child">
														<a data-toggle="tab" href="#tab-2" aria-expanded="false">其他</a>
													</li>
													<li class="kd_child">
														<a data-toggle="tab" href="#tab-3" aria-expanded="false">常用</a>
													</li>
												</ul>
												<div class="tab-content">
													<div id="tab-1" class="tab-pane active">
														<ul class="kdpers_list">
															<li class="kdpers_errormsg hidden">请求失败</li>
															<li data-id="1" class="kdpers_parentnode">
																<div class="kdpers_title">
																	<h5><i class="fa fa-caret-right"></i><span class="kdmini_parentname">华山派</span><em class="kdmini_nums">（3）</em></h5>
																	<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																</div>

																<ul class="kdpers_chatlist">
																	<li data-id="100001" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a5.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>郭敬明（掌门）</span></h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																	<li data-id="100002" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a6.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>崔成浩（大师姐）</span> </h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																	<li data-id="1000022" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a7.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>韩寒（小师妹）</span> </h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																</ul>
															</li>
															<li data-id="2" class="kdpers_parentnode">
																<div class="kdpers_title">
																	<h5><i class="fa fa-caret-down"></i><span class="kdmini_parentname">青云志</span><em class="kdmini_nums">（2）</em></h5>
																	<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																</div>

																<ul class="kdpers_chatlist">
																	<li data-id="100001" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a5.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>郭敬明（掌门）</span></h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																	<li data-id="100002" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a6.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>崔成浩（大师姐）</span> </h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																	<li data-id="1000022" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a7.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>韩寒（小师妹）</span> </h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																</ul>
															</li>

														</ul>
													</div>
													<div id="tab-2" class="tab-pane">
														<ul class="kdpers_list">
															<li class="kdpers_errormsg hidden">请求失败</li>
															<li data-id="1" class="kdpers_parentnode">
																<div class="kdpers_title">
																	<h5><i class="fa fa-caret-right"></i><span class="kdmini_parentname">华山派22</span><em class="kdmini_nums">（3）</em></h5>
																	<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																</div>

																<ul class="kdpers_chatlist">
																	<li data-id="100001" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a5.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>郭敬明（掌门）</span></h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																	<li data-id="100002" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a6.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>崔成浩（大师姐）</span> </h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																	<li data-id="1000022" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a7.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>韩寒（小师妹）</span> </h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																</ul>
															</li>

														</ul>
													</div>
													<div id="tab-3" class="tab-pane">
														<ul class="kdpers_list">
															<li class="kdpers_parentnode">
																<ul class="kdpers_chatlist">
																	<li data-id="100001" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a5.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>郭敬明（掌门）</span></h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																	<li data-id="100002" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a6.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>崔成浩（大师姐）</span> </h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																	<li data-id="1000022" class="kdmini_childnode" type="one">
																		<a class="kdpers_oneface"><img src="img/a7.jpg"></a>
																		<div class="kdpers_onename">
																			<h4><span>韩寒（小师妹）</span> </h4>
																			<p>仙剑—华山派</p>
																		</div>
																		<div class="kdpers_checkbox"><input type="checkbox" value=""> </div>
																	</li>
																</ul>
															</li>

														</ul>
													</div>
												</div>

											</div>
										</div>

									</div>
								</div>

							</div>

						</div>

					</div>

				</div>
			</div>

		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/selectUser.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/multipleSelectUser.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var selectedUsers = [];
			var userlist = $('#userList').selectUser({
				success: function(users, tags, rangeType) {
					console.log(users);
					console.log(tags);
					console.log(rangeType);
					selectedUsers = users;
				},
				selectedModel: 2,
				rangeModel: 2
			});

			var muliUserList = $('#muliUserList').multipleSelectUser({
				success: function(users, tags, rangeType) {
					console.log(users);
					console.log(tags);
					console.log(rangeType);
					selectedUsers = users;
				},
				getPositionTypeUrl: 'data/PositionTypes.json'
			});

			function ShowSelectUser() {
				userlist.data('selectUser').showSelectUser(selectedUsers, {
					a: 'b'
				}, [{
					id: "44bfa898-a5e9-4d16-9463-0164599e30ad",
					name: "秀玉-员工"
				}]);
			}

			function ShowMultipleSelectUser() {
				muliUserList.data('multipleSelectUser').showSelectUser(selectedUsers, {
					a: 'b'
				}, [{
					id: "44bfa898-a5e9-4d16-9463-0164599e30ad",
					name: "秀玉-员工"
				}]);
			}
		</script>
	</body>

</html>